import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useEffect, useRef } from 'react';


echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

export default function StudentConditionShow({testData}) {
    const showPlace = useRef(null);
    useEffect(() => {
        const testNameList = testData.map(ele => ele.partid);
        const testScoreRate = testData.map(ele => ele.percent);
    
        const chartDom = showPlace.current;
        echarts.init(chartDom).dispose();
        const myChart = echarts.init(chartDom);

        const option = {
            xAxis: {
                type: 'category',
                data: testNameList
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: testScoreRate,
                    type: 'line'
                }
            ]
        };

        option && myChart.setOption(option);
    },[])


    return (
        <div className='condition' ref={showPlace}></div>
    )
}